<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.7.1.min.js"></script>
</head>

<body>
    <button class="set">设置</button>
    <button class="get">获取</button>
    <!-- <button class="edit">修改</button> -->
    <button class="del">删除</button>
    <button class="enum">遍历</button>

    <p>
        <a href="./01 cookie回顾.html">同级</a>
        <a href="../../day01/html/01 JS初识.html">其他级</a>
    </p>
</body>
<script>
    // HTML5的WebStorage提供了两种API：localStorage（本地存储 => 长时间存储, 只要不删除永远都不会过期）和sessionStorage（会话存储 => 浏览器窗口关闭就过期）

    // 如何查看localStorage / sessionStorage
    // (2) JS获取和设置  => localStorage / sessionStorage 全局对象
    console.log(window.localStorage);
    // console.log(window.sessionStorage);

    /* 
        localStorage / sessionStorage 的属性和方法

        属性:
        length   返回localStorage / sessionStorage的长度 => 数据的条数

        方法:
        setItem(key, value) —— 保存数据，以键值对的方式存储信息 (没有就新增,有就修改)
        getItem(key) —— 获取数据，将键值传入，即可获取到对应的value值
        removeItem(key) —— 删除单个数据，根据键值移除对应的信息
        clear() —— 删除所有的数据
        key(index) —— 获取某个索引的key

        注意: 
        (1) localStorage / sessionStorage 健值只能是字符串类型(如果想存储数组和对象 => JSON.stringify()  JSON.parse())
        (2) localStorage / sessionStorage 本质是对象数据  => 对象数据的 增 删 改语法同样适用

        localStorage.user = "a123123";  (没有就新增,有就修改)
        localStorage.user

        delete localStorage.user;

        
    */

    $(".set").click(function () {
        localStorage.setItem("user", "a123123");
        localStorage.setItem("pwd", "123123");
        localStorage.setItem("phone", "17386141517");
        localStorage.setItem("email", "123123@qq.com");

        var arr = [1, 2, 3];
        var obj = { a: 1, b: 2 };
        localStorage.setItem("arr", JSON.stringify(arr));
        localStorage.setItem("obj", JSON.stringify(obj));
        console.log(window.localStorage);
    })

    $(".get").click(function () {
        console.log(localStorage.getItem("user"));
        console.log(localStorage.getItem("pwd"));
        console.log(localStorage.getItem("phone"));
        console.log(localStorage.getItem("email"));
        console.log(JSON.parse(localStorage.getItem("arr")));
        console.log(JSON.parse(localStorage.getItem("obj")));
    })

    $(".del").click(function () {
        // localStorage.removeItem("user");
        // localStorage.removeItem("pwd");
        // localStorage.removeItem("phone");
        // localStorage.removeItem("email");
        // localStorage.removeItem("arr");
        // localStorage.removeItem("obj");

        localStorage.clear();
    })

    $(".enum").click(function () {
        // for (var key in localStorage) {
        //     console.log(key);
        // }

        for (var i = 0; i < localStorage.length; i++) {
            var key = localStorage.key(i);
            console.log(i, key);

        }
    })




</script>

</html>